import { PureComponent } from "react";
import { InputItem } from "antd-mobile";
import MToast from "../../Util/MToast"
import { isNull, combineDefaultStr, handleInputFocusBlur, getMDrawerFullHeight } from "../../../utils/helper"
import MIcon from "../../MIcon"
import MDrawer from "../../MDrawer/MDrawer"
interface Props {
	value: any,
	other_label?: string,
	setFieldsValue: Function,
	getFieldValue: Function,
	field: string[],
	onChange: Function,
	place_holder?: string,
	formData: object,
	label?: string,
	required?: any,
	show_label?: any,
	tips?: string,
	label_width?: any,
	list: any[],
	hasError: boolean,
	errorMsg: string,
	value_datatype?: string,
	label_text_color?: string,
	label_text_align?: any,
	other_place_holder?: string
}
interface State {
	value: any,
	open: Boolean,
	selectValue: any,
	otherCode: any,
	otherName: any
}
export default class MySelectOther extends PureComponent<Props, State> {
	public state: State = {
		value: this.props.value,
		open: false,
		selectValue: "",
		otherCode: "",
		otherName: ""
	}
	onOpenChange = () => {
		this.setState({ open: !this.state.open });
	};
	handleCancel = () => {
		this.onOpenChange()
	};
	handleOk = () => {
		let { selectValue, otherCode, otherName } = this.state;
		let { other_label, setFieldsValue, getFieldValue, field } = this.props;
		if (selectValue == otherCode) {
			if (isNull(otherName)) {
				MToast.fail("请选择：" + other_label, 1.5, null, false)
			}
			else {
				getFieldValue([field[1]]);
				setFieldsValue({
					[field[1]]: otherName
				});
				setTimeout(() => {
					this.changeValue(selectValue);
					this.onOpenChange()
				});
			}
		}
		else {
			this.changeValue(selectValue);
			this.onOpenChange();
			this.setState({
				otherName: undefined
			})
		}
	};
	selectItemClick = (item) => {
		let { code } = item;
		this.setState({
			selectValue: code
		})
	};

	componentWillMount() {
		this.setState({
			otherCode: -1
		})
	}
	componentWillReceiveProps(nextProps) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			let value = nextProps.value;
			this.setState({
				value
			});
		}
	}
	changeValue = (value) => {
		if (!('value' in this.props)) {
			this.setState({
				value: value
			});
		}
		this.triggerChange(value);
	};

	triggerChange = (changedValue) => {
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};
	onChange = (value) => {
		this.changeValue(value);
	};
	renderName = (valueItem) => {
		let { place_holder, formData, field } = this.props;
		if (!isNull(valueItem)) {
			return <div style={{ color: "#000", textAlign: "right" }}>{valueItem.name}</div>
		}
		else {
			if (!isNull(formData[field[1]])) {
				return <div style={{ color: "#000", textAlign: "right" }}>{formData[field[1]]}</div>
			}
			else {
				return <div style={{ color: "rgb(187,187,187)", textAlign: "right" }}>{place_holder}</div>
			}
		}
	};
	render() {
		let { field, label, required, show_label, tips, label_width = 5, list, formData, hasError, errorMsg, value_datatype = "string", label_text_color, label_text_align = "left", other_label = "其他", other_place_holder } = this.props;
		let isNumber = value_datatype == "number";
		let isShowLabel = isNull(show_label) || show_label == 1;
		let isRequired = required == 1;
		let { value, open, selectValue, otherCode } = this.state;

		let valueItem;
		if (!isNull(value) && list.length > 0) {
			list.map(item => {
				let { code } = item;
				if (isNumber) {
					code = Number(code);
				}
				if (code === value) {
					valueItem = item;
				}
			})
		}

		if (list && list.length > 0) {
			list = list.map(i => {
				return {
					...i,
					label: i.name,
					value: i.code
				}
			})
		}
		list.push({
			code: otherCode,
			name: other_label
		});

		let requiredClass = "am-list-item am-input-item am-list-item-middle mi-text mi-radio-group";
		if (isRequired) {
			requiredClass += " required"
		}
		if (!isNull(label_text_align)) {
			requiredClass += " label-text-align-" + label_text_align
		}
		if (hasError) {
			requiredClass += " am-input-error"
		}
		let labelClass = "am-input-label am-input-label-";
		if (isNull(label_width)) {
			labelClass += "3"
		}
		else {
			labelClass += label_width
		}
		return (
			<div>
				<div className={requiredClass} style={{ fontSize: "16px" }} data-flex>
					{
						isShowLabel ? <div className={labelClass} style={{ color: label_text_color }}>
							{label}
						</div> : <div></div>
					}
					<div style={{ color: "#888" }} className="am-list-line" data-flex="dir:left box:last" onClick={() => {
						if (isNull(list) || list.length == 0) {
							MToast.info("暂无数据", 2, null, false)
						}
						else {
							this.setState({
								selectValue: value
							});
							if (value == otherCode) {
								this.setState({
									otherName: formData[field[1]]
								})
							}
							this.onOpenChange();
						}
					}}>
						{this.renderName(valueItem)}
						<div data-flex="cross:center box:last">
							<p style={{ width: "16px" }}><MIcon type="xiayiye" style={{ color: "rgb(187, 187, 187)" }} /></p>
							<div className="am-input-error-extra mi" onClick={(e) => {
								e.stopPropagation();
								MToast.info(errorMsg, 2, null, false)
							}}
							/>
						</div>
					</div>
				</div>
				{tips && <p className="tipsStyle">{tips}</p>}
				<MDrawer open={open} position="bottom" height={getMDrawerFullHeight} onOpenChange={() => {
					this.setState({
						open: !this.state.open
					})
				}}>
					<div className="am-picker-popup-header" >
						<div className="am-picker-popup-item am-picker-popup-header-left" onClick={this.handleCancel}>取消</div>
						<div className="am-picker-popup-item am-picker-popup-title">{label}</div>
						<div className="am-picker-popup-item am-picker-popup-header-right" onClick={this.handleOk}>确定</div>
					</div>
					<div style={{ overflow: "auto", WebkitOverflowScrolling: "touch" }}>
						{
							list.map(item => {
								let { code, name, desc, url } = item;
								if (isNumber) {
									code = Number(code);
								}
								let img = "./image/radio_group_no.png";
								let isYes = false;
								if (!isNull(selectValue)) {
									if (selectValue === code) {
										isYes = true;
									}
								}
								if (isYes) {
									img = "./image/radio_group_yes.png";
								}
								return (
									<div style={{ fontSize: "16px", padding: "10px 10px", borderBottom: "1px solid #f7f7f7" }} data-flex="dir:left cross:center main:start" key={code} onClick={() => {
										this.selectItemClick(item)
									}}>
										<img style={{ width: '20px', height: "20px", marginRight: "10px" }} src={img} alt="" />
										<div data-flex="dir:left cross:center">
											{
												!isNull(url) ? <img style={{ width: "50px", height: "50px", marginRight: "10px" }} src={url} alt="" /> : null
											}
											<div>
												<p>{name}</p>
												<p style={{ color: "#999", fontSize: "14px", marginTop: "2px" }}>{desc}</p>
											</div>
										</div>
									</div>
								)
							})
						}
						{
							<InputItem
								placeholder={other_place_holder}
								value={this.state.otherName}
								key={formData[field[1]]}
								disabled={selectValue != otherCode}
								style={{ borderBottom: "1px solid #f7f7f7", height: "40px" }}
								onFocus={() => {
									handleInputFocusBlur()
								}}
								onBlur={() => {
									handleInputFocusBlur(true);
								}}
								onChange={(e) => {
									this.setState({
										otherName: e
									})
								}}
							/>
						}
					</div>
					<div></div>
				</MDrawer>
			</div>
		)
	}
}
